<script lang="ts" setup>
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import type {UserType} from "../models/user";

import {getCurrentUser} from "../service/user.ts";

import {showFailToast, showSuccessToast} from "vant/es";
const router = useRouter()
const currentUser = ref<UserType | null>(null);

onMounted(async () => {
  try {
    currentUser.value = await getCurrentUser();
    if (currentUser.value) {
      showSuccessToast("获取当前用户成功");
    } else {
      showFailToast("获取用户信息失败，请检查登录状态");
      // 不直接跳转，让用户选择
    }
  } catch (error) {
    console.error("获取用户信息失败:", error);
    showFailToast("获取用户信息失败，请重试");
  }
});
const toEdit= (editKey:string,currentValue:string|number,editName:string)=>{
  router.push({
    path:"/user/edit",
    query:{
      editKey,
      currentValue,
      editName,
    }
  })


}
</script>

<template>

  <div v-if="currentUser">
    <van-cell
        :value="currentUser.userName"
        title="昵称"
        @click="toEdit('userName', currentUser.userName, '昵称')"
    />

    <van-cell
        is-link
        title="头像"
        @click="toEdit('avatarUrl', currentUser.avatarUrl || '', '头像')"
    >
      <img
          v-if="currentUser.avatarUrl"
          :src="currentUser.avatarUrl"
          style="height: 47px; border-radius: 4px;"
      />
      <span v-else>未设置</span>
    </van-cell>

    <van-cell
        :value="currentUser.userAccount"
        title="账号"
    />

    <van-cell
        :value="currentUser.gender"
        is-link
        title="性别"
        @click="toEdit('gender', currentUser.gender, '性别')"
    />

    <van-cell
        :value="currentUser.phone"
        arrow-direction="down"
        is-link
        title="手机号"
        @click="toEdit('phone', currentUser.phone, '手机号')"
    />

    <van-cell
        :value="currentUser.email"
        title="邮箱"
        @click="toEdit('email', currentUser.email, '邮箱')"
    />

    <van-cell
        :value="new Date(currentUser.createTime).toLocaleString()"
        title="注册时间"
    />
  </div>

  <van-empty v-else description="加载用户信息中...">
    <van-loading size="24px">正在加载...</van-loading>
  </van-empty>
</template>



<style scoped>

</style>